<template>
  <KView class="goods-group-join-view">
    <template v-if="groupType===1&&goodsGroup.sponsorUnionid===''">
      <KView class="group-join-view-head">
        <group-head-img v-for="group in goodsGroup.recommendGroupList" :key="group.id" :group="group" @join-group="joinGroup">
        </group-head-img>
      </KView>
      <KView class="group-join-view-text">请选择参加哪个拼团</KView>
    </template>
    <template v-else>
      <KView class="group-join-view-head">
        <group-head-img :group="goodsGroup.myGroup">
        </group-head-img>
      </KView>
    </template>
    <template v-if="groupType===1">
      <template v-if="goodsGroup.sponsorUnionid!==''">
        <KView class="group-join-view-text">
          <span>仅剩</span>
          <span class="group-join-view-count">{{4-goodsGroup.myGroup.count}}</span>
          <span>个名额</span>
        </KView>
        <KView class="group-join-view-btn-div">
          <KButton v-if="isMiniprogram" class="group-join-view-btn" open-type="share">已参团,邀请好友参团</KButton>
          <KButton v-else class="group-join-view-btn" @click="inviteGroup">已参团,邀请好友参团</KButton>
        </KView>
      </template>
    </template>
    <template v-else>
      <KView class="group-join-view-text">
        <span v-if="goodsGroup.myGroup.count===4">本次拼团成功</span>
        <span v-else>本次拼团失败</span>
      </KView>
    </template>
  </KView>
</template>

<script>
  import GroupHeadImg from './groupHeadImg';

  export default {
    props: {
      goodsGroup: {
        type: Object,
        required: true
      }
    },

    watch: {
      'goodsGroup.type'() {
        this.groupType = this.goodsGroup.type;
      }
    },

    data() {
      return {
        groupType: this.goodsGroup.type,
        isMiniprogram: process.env.isMiniprogram
      };
    },

    methods: {
      joinGroup(group) {
        let goodsGroup = this.goodsGroup;
        if (this.groupType === 1 && goodsGroup.sponsorUnionid === '') {
          this.$emit('join-group', group, goodsGroup);
        }
      },

      inviteGroup() {

      }
    },

    components: {
      GroupHeadImg
    }
  };

</script>

<style lang="scss">
  .goods-group-join-view {
    .group-join-view-head {
      margin-bottom: formatPx(40);

      .group-head-img {
        margin-bottom: formatPx(30);

        &:last-child {
          margin-bottom: 0;
        }
      }
    }

    .group-join-view-text {
      font-size: formatPx(28);
      text-align: center;
      height: formatPx(40);
      line-height: formatPx(40);

      .group-join-view-count {
        font-size: formatPx(32);
        color: #fd5a3a;
        margin: 0 formatPx(5);
      }
    }

    .group-join-view-btn-div {
      margin-top: formatPx(46);
      height: formatPx(88);

      .group-join-view-btn {
        width: 100%;
        height: 100%;
        border: none;
        line-height: formatPx(88);
        color: #ffffff;
        font-size: formatPx(28);
        background: #fd5a3a;
        border-radius: formatPx(44);
        padding: 0;
        font-weight: normal;

        &:active {
          background: #fd5a3a;
          color: #ffffff;
        }
      }
    }
  }

</style>
